<script setup lang="ts">
import { defineComponent, ref, reactive,defineProps} from 'vue'
import { useRouter } from 'vue-router'
import { Tree } from '../../const/tree'

        const router = useRouter();
        const datatree = ref<Array<Tree>>([
            {
                label: '首页',
                icon: 'House',
                path: '/',
                teleported: false,

            },
            {
                label: '设置',
                icon: 'Setting',
                path: '/set',
                teleported: false,

            }
            ,
            {
                label: '效果编辑',
                icon: 'Edit',
                path: '/effect',
                teleported: false,

            }

        ])
       const props =defineProps<{
            isCollapse:boolean           
        }>()
      
        const handleNodeClick = (data: Tree) => {
            const path = data.path
            router.push(path)

        }
  

</script>

<template>
    <el-menu default-active="1" class="el-menu-vertical" :collapse="props.isCollapse" :router="true">

        <el-menu-item v-for=" (data, index)  in datatree" :key="index" :index="index" :teleported="data.teleported"
            :route="data">
            <el-icon>
                <component :is="data.icon"></component>
            </el-icon>
            <template #title>

                {{ data.label }}
            </template>
        </el-menu-item>

    </el-menu>
</template>
<style lang="scss" scoped>
.el-menu-vertical{
    height: 92vh;
    margin-right: 2vw;
    overflow: hidden;
}
</style>